<template>
	<el-dialog title="素材库" :visible="imageLibray.status" width="960px" :before-close="handleCancel" class="left-tab-dialog">
		<!-- 请最少选择一张图片 -->
		<p class="no-img-tip">{{message}}</p>
		<el-tabs tab-position="left"  v-model="activeName" style="min-height: 200px;" @tab-click="handleClick">
			<el-tab-pane label="图片库" name="public">
				<!-- 图片分类 -->
				<!-- <tab-type :tab="tab_menu" :tabcontent="tab_content" v-if="tab_menu.length>0&&tab_content.length>0" @switch="getPublicImgs"></tab-type> -->
				<!-- 系统图片 -->
				<div v-if="publicImgLists.length>0">
					<img-lists :lists="publicImgLists" @pick="pick" :active="selectImage" :imgtype="imageLibray.type" />
					<el-pagination layout="prev, pager, next" :total="total" @current-change="pageChange"></el-pagination>
				</div>
				<!-- 暂无图片 -->
				<div class="nophoto" v-if="show_public_nullimg">
					<img src="../../assets/noPhoto.png" alt="">
					<p>暂无图片</p>
				</div>
				
			</el-tab-pane>
			<el-tab-pane label="我的图片" name="user">
				<!-- 图片列表 -->
				<div v-if="userImgLists.length>0">
					<img-lists :lists="userImgLists" @pick="pick" :active="selectImage" :imgtype="imageLibray.type" />
					<el-pagination layout="prev, pager, next" :total="total" @current-change="pageUserChange"></el-pagination>
				</div>
				
				<!-- 暂无图片 -->
				<div class="nophoto" v-if="show_user_nullimg">
					<img src="../../assets/noPhoto.png" alt="">
					<p>还没有上传图片</p>
				</div>
			</el-tab-pane>
			
			
		</el-tabs>
		<!-- 图片上传 -->
		<el-upload ref='upload' class="upload-demo" drag action="http://192.168.1.40:8088/api/ImageAPI/UploadImage" :data="post_data"
		 :on-success="success_callback" :on-error="error_callback" multiple :show-file-list="show_file_list">
			<el-button round><i class="iconfont icon-update"></i>上传图片</el-button>
			<el-tooltip class="item" effect="dark" content="只能上传JPG/PNG文件，且大小不超过2M" placement="right">
				<i class="iconfont icon-remind"></i>
			</el-tooltip>
		</el-upload>
		<!-- 图片上传结束 -->
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="handleCancel">取 消</el-button>
			<el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import lists from './lists.vue'
	import tabType from './tab-type.vue'

	export default {
		name: 'ImageLibray',
		data() {

			return {
				activeName: 'public',
				selectImage: {
					id: '',
					name: '',
					url: '',
					imgsetUrl: []
				},
				userImgLists: [],
				publicImgLists: [],
				tab_menu: [],
				tab_content: [],
				total: 0,
				params: {
					id: 1,
					tabType: ''
				},
				message: "",
				show_file_list:false,
				show_public_nullimg:false,
				show_user_nullimg:false

			}
		},
		computed: {
			imageLibray() {
				return this.$store.getters.image_libray
			},
			post_data() {
				return {
					imgType: this.imageLibray.type
				}
			}
		},
		beforeUpdate() {
			if(this.publicImgLists.length==0){
				this.show_public_nullimg=true
			}else{
				this.show_public_nullimg=false
			}
			if(this.userImgLists.length>0){
				this.show_user_nullimg=false
			}else{
				this.show_user_nullimg=true
			}
		},
		methods: {
			// tab切换，请求用户的图片数据
			handleClick() {
				if (this.activeName === 'user') {
					// 获取用户图片
					this.getUserImages()
				}
			},
			pick(img) {
				this.selectImage.id = img.ID
				if (this.imageLibray.type === 'imgset') {
					const index = this.selectImage.imgsetUrl.indexOf(img.ImgUrl)
					if (index > -1) {
						this.selectImage.imgsetUrl.splice(index, 1)
						if (this.selectImage.imgsetUrl.length < 6) {
							this.message = ""
						}
					} else {
						if (this.selectImage.imgsetUrl.length == 6) {
							this.message = "最多只能选择6张图片"
							return
						}
						this.selectImage.imgsetUrl.push(img.ImgUrl)
					}
				} else {
					this.selectImage.url = img.ImgUrl
				}
			},
			// 取消
			handleCancel() {
				this.selectImage.id = ''
				this.$store.commit('IMAGE_LIBRAY', false)
				this.$store.commit('SET_IMAGESETS',[])
			},
			// 确定
			handleConfirm() {
				// 当点击图集的时候，单击确认
				if (this.imageLibray.type === 'imgset') {
					if (this.selectImage.imgsetUrl && this.selectImage.imgsetUrl.length > 0) {
						this.imageLibray && this.imageLibray.callback && this.imageLibray.callback(this.selectImage)
					} else {
						this.message = "请最少选择一张图片"
					}
				} else {
					// 当点击背景、图片、自定义图片时
					if (this.selectImage.url) {
						this.imageLibray && this.imageLibray.callback && this.imageLibray.callback(this.selectImage)
						this.handleCancel()
					}else {
						this.message = "请最少选择一张图片"
					}
				}
			},
			// 切换类型
			getPublicImgs(params) {
				// 请求的图片类型
				const imgtype = this.imageLibray.type
				Object.assign(this.params, params)
				this.$request.get_sys_images({
					data: {
						typeId: params.id,
						page: 1,
						imgType: imgtype
					},
					success: (result) => {
						this.total = result.data.total
						this.publicImgLists = result.data.imageList.Images
						if (params.tabType === 'parent') {
							this.tab_content = result.data.imageList.ImageTypes
						}
					}
				})
			},
			getUserImages() {
				// 请求的图片类型
// 				const imgtype = this.imageLibray.type
// 				this.$request.get_user_images({
// 					data: {
// 						imgType: imgtype,
// 						page:1
// 					},
// 					success: (result) => {
// 						this.userImgLists = result.data.imageList
// 						this.total=result.data.total
// 					}
// 				})
				this.userImgLists=[
					{
						'ID':1,
						'ImgUrl':'static/images/bg/1.jpg'
					},{
						'ID':2,
						'ImgUrl':'static/images/bg/2.jpg'
					},
					{
						'ID':3,
						'ImgUrl':'static/images/bg/3.jpg'
					},
					{
						'ID':4,
						'ImgUrl':'static/images/bg/4.jpg'
					},
					{
						'ID':5,
						'ImgUrl':'static/images/bg/5.jpg'
					}
				]
			},
			pageChange(pageIndex) {
				const params_content = this.params
				const imgtype = this.imageLibray.type
				this.$request.get_sys_images({
					data: {
						typeId: params_content.id,
						page: pageIndex,
						imgType: imgtype
					},
					success: (result) => {
						this.total = result.data.total
						this.publicImgLists = result.data.imageList.Images
						if (params_content.tabType === 'parent') {
							this.tab_content = result.data.imageList.ImageTypes
						}
					}
				})
			},
			// 用户图片的上下页
			pageUserChange(pageIndex){
				const imgtype = this.imageLibray.type
				this.$request.get_user_images({
					data: {
						imgType: imgtype,
						page:pageIndex
					},
					success: (result) => {
						this.userImgLists = result.data.imageList
						this.total=result.data.total
					}
				})
			},
			// 图片上传
			success_callback(response,file, file_list) {
				// 上传成功的响应
				if(response.success){
					this.$refs.upload.clearFiles()
					if (file.status=='success') {
						this.activeName = "user"
						this.getUserImages()
						this.message=""
					}
				}else{
					this.message=response.message
				}
			},
			// 上传失败的回调
			error_callback(err,file,file_list){
				console.log(err)
			}
		},
		mounted() {
// 			const image_libray = this.$store.getters.image_libray
// 			// 获取图片分类
// 			this.$request.get_sysImgType({
// 				success: (result) => {
// 					this.tab_menu = result.data
// 				}
// 			})
// 			// 获取图片集合
// 			this.$request.get_sys_images({
// 				data: {
// 					typeId: 1,
// 					page: 1,
// 					imgType: image_libray.type
// 				},
// 				success: (result) => {
// 					this.total = result.data.total
// 					this.publicImgLists = result.data.imageList.Images
// 					this.tab_content = result.data.imageList.ImageTypes
// 				}
// 			})
// 			const imgUrls = this.$store.getters.imageSetUrls
// 			if (image_libray.type === 'imgset' && imgUrls && imgUrls.length > 0) {
// 				for (let item of imgUrls) {
// 					this.selectImage.imgsetUrl.push(item)
// 				}
// 			}
			
	
			this.publicImgLists=[
				{
					'ID':6,
					'ImgUrl':'static/images/bg/6.jpg'
				},{
					'ID':7,
					'ImgUrl':'static/images/bg/7.jpg'
				},
				{
					'ID':8,
					'ImgUrl':'static/images/bg/8.jpg'
				},
				{
					'ID':9,
					'ImgUrl':'static/images/bg/9.jpg'
				},
				{
					'ID':10,
					'ImgUrl':'static/images/bg/10.jpg'
				}
			]
		},
		components: {
			imgLists: lists,
			tabType: tabType
		}
	}
</script>
<style lang="scss">

</style>
